<!--
 * @Description: 
 * @Author: Zhangx
 * @Date: 2023-08-16 14:07:30
 * @LastEditors: restart 2425792130@qq.com
 * @LastEditTime: 2024-08-13 14:38:44
-->
<template>
  <div class="tabs">
    <el-tag
      v-for="item in tags"
      :key="item.path"
      class="mx-1"
      :closable="item.name !== 'home'"
      :effect="$route.name === item.name ? 'dark' : 'plain'"
      @click="changeMenu(item)"
      @close="handleClose(item,index)"
    >
      {{ item.label }}
    </el-tag>
  </div>
</template>

<script lang="ts" setup>
import router from '@/router';
import { computed } from 'vue'
import store from '../stores/index'
// import { useStore } from 'vuex'
import {useRouter,useRoute} from 'vue-router'
const tags = computed(() => store.state.tab.tabsList)
const route = useRoute()
// 点击tag跳转的功能
const changeMenu = (item:any) => {
  router.push({name:item.name})
}
// 点击tag删除的功能
const handleClose = (item, index) => {
  // 调用store中的mutations
  store.commit('closeTag', item)
  const length = tags.value.length
  // 删除之后的跳转逻辑
  if (item.name !== route.name) {
    return
  }
  // 如果删除的是最后一项
  if (item === length) {
    router.push({
      name: tags[index -1].anme
    })
  } else {
    router.push({
      name: tags[index].anme
    })
  }

}
</script>

<style lang="scss" scoped>
// :deep(.tabs) {
//   margin-left: 20px !important;
//   box-sizing: border-box;
// }
</style>